<template>
  <div class="ownerservice-content">
    <back-bar title="修改房源信息" @toBack="toBack" />
    <van-field
      v-model="houseInfo.price"
      label="价格"
      type="number"
      placeholder="请输入价格"
      clearable
      colon
      clickable
      autofocus
    />
    <van-field
      v-model="houseInfo.area"
      label="面积"
      type="number"
      placeholder="请输入房屋面积(m²)"
      clearable
      colon
      clickable
      autofocus
    />
    <van-field
      readonly
      clickable
      name="area"
      :value="areaValue"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
      colon
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="showArea = false" />
    </van-popup>
    <van-field
      v-model="houseInfo.address"
      rows="2"
      autosize
      label="具体地址"
      type="textarea"
      maxlength="30"
      placeholder="请输入具体地址"
      show-word-limit
      colon
    />
    <van-field
      v-model="houseInfo.floor"
      label="具体楼层"
      type="digit"
      placeholder="请输入楼层数"
      clearable
      colon
      clickable
      autofocus
    />
    <van-field
      readonly
      clickable
      :value="houeseTypevalue"
      label="出租类型"
      placeholder="点击选择类型"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="houeseTypevalueColumns"
        @confirm="onHouseTypeConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      :value="houseDirctionValue"
      label="房源朝向"
      placeholder="点击选择类型"
      @click="showDirectionPopup = true"
    />
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader v-model="uploader" :multiple="true" :after-read="afterRead" />
      </template>
    </van-field>
    <van-popup v-model="showDirectionPopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="houseDirctionValueColumns"
        @confirm="onhouseDirctionConfirm"
        @cancel="showDirectionPopup = false"
      />
    </van-popup>
    <van-field name="radio" label="卧室" colon>
      <template #input>
        <van-radio-group v-model="houseInfo.bedroom" direction="horizontal">
          <van-radio name="1">一室</van-radio>
          <van-radio name="2">两室</van-radio>
          <van-radio name="3">三室</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="客厅" colon>
      <template #input>
        <van-radio-group v-model="houseInfo.livingroom" direction="horizontal">
          <van-radio name="1">一厅</van-radio>
          <van-radio name="2">两厅</van-radio>
          <van-radio name="0">无</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="房子类型" colon>
      <template #input>
        <van-radio-group v-model="houseInfo.isCommercial" direction="horizontal">
          <van-radio name="1">商住</van-radio>
          <van-radio name="2">民住</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="是否独卫" colon>
      <template #input>
        <van-radio-group v-model="houseInfo.isToilet" direction="horizontal">
          <van-radio name="1">有独卫</van-radio>
          <van-radio name="2">无独卫</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="checkboxGroup" label="房屋设施">
      <template #input>
        <van-checkbox-group v-model="checkboxDevicesGroup" direction="horizontal">
          <div class="devices-box">
            <van-checkbox name="1" shape="square">冰箱</van-checkbox>
            <van-checkbox name="4" shape="square">宽带</van-checkbox>
            <van-checkbox name="5" shape="square">沙发</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="15" shape="square">阳台</van-checkbox>
            <van-checkbox name="13" shape="square">厕所</van-checkbox>
            <van-checkbox name="9" shape="square">电视</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="10" shape="square">空调</van-checkbox>
            <van-checkbox name="11" shape="square">衣柜</van-checkbox>
            <van-checkbox name="12" shape="square">床铺</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="6" shape="square">油烟机</van-checkbox>
            <van-checkbox name="7" shape="square">燃气灶</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="8" shape="square">可做饭</van-checkbox>
            <van-checkbox name="16" shape="square">暖气片</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="2" shape="square">洗衣机</van-checkbox>
            <van-checkbox name="3" shape="square">热水器</van-checkbox>
          </div>
          <div class="devices-box">
            <van-checkbox name="14" shape="square">智能门锁</van-checkbox>
          </div>
        </van-checkbox-group>
      </template>
    </van-field>
    <van-field
      v-model="houseInfo.brief"
      rows="2"
      autosize
      label="房源简介"
      type="textarea"
      maxlength="30"
      placeholder="请填写房源简介"
      show-word-limit
      colon
    />

    <select-popup
      title="您确定发布房源吗"
      :showSelectPopup="showSelectPopup"
      @handleCancel="handleCancel"
      @handleAffirm="handleAffirm"
      @handleClickOverlay="handleClickOverlay"
    />
    <!-- @click="submitBtn" -->
    <button class="submitBtn" @click="submitBtn">提交</button>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import SelectPopup from "components/common/selectpopup/SelectPopup";

import area from "assets/json/area.js";

import { publicHouseInfo, upDataHouseInfo } from "network/houseInfo";
import { uploadingHousePicture } from "network/uploadImg";
import { getHouseDetail } from "network/housedetail";

export default {
  name: "updatahouseinfo",
  components: {
    BackBar,
    SelectPopup,
  },
  data() {
    return {
      houseInfo: {
        price: "", //价格
        area: "", //面积
        province: "", //省
        city: "", //市
        region: "", //区
        address: "", //具体地址
        brief: "", //简介
        bedroom: "", //卧室
        livingroom: "", //客厅
        isToilet: "", //是否独卫
        isCommercial: "", //房子类型
        floor: "", //楼层
        direction: "", //房子朝向
        rentType: "", //出租类型
        rentOutUserId: localStorage.getItem("userId"), //出租人ID
        devices: {
          iceBox: "", //冰箱
          washMachine: "", //洗衣机
          heater: "", //热水器
          wideBand: "", //宽带
          sofa: "", //沙发
          smokeMachine: "", //油烟机
          gasStove: "", //燃气灶
          cook: "", //可做饭
          video: "", //电视
          airConditioner: "", //空调
          wardrobe: "", //衣柜
          bed: "", //床
          isWc: "", //卫生间
          doorLock: "", //智能门锁
          balcony: "", //阳台
          heating: "", //暖气
        },
        imageList: [],
      },
      houseName: "",
      areaValue: "",
      showArea: false,
      areaList: area,
      houeseTypevalue: "", //房源的出租类型
      houeseTypevalueColumns: ["一月租", "一年租", "1-3月租", "4-6月租"],
      showPicker: false,
      houseDirctionValue: "",
      houseDirctionValueColumns: [
        "朝东",
        "朝南",
        "朝西",
        "朝北",
        "东南",
        "东北",
        "西南",
        "西北",
      ],
      showDirectionPopup: false,
      checkboxDevicesGroup: [],
      showSelectPopup: false,
      uploader: [],
      baseDevices: [],
      devicesId: "",
      devices: {
        iceBox: "", //冰箱
        washMachine: "", //洗衣机
        heater: "", //热水器
        wideBand: "", //宽带
        sofa: "", //沙发
        smokeMachine: "", //油烟机
        gasStove: "", //燃气灶
        cook: "", //可做饭
        video: "", //电视
        airConditioner: "", //空调
        wardrobe: "", //衣柜
        bed: "", //床
        isWc: "", //卫生间
        doorLock: "", //智能门锁
        balcony: "", //阳台
        heating: "", //暖气
      },
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    onAreaConfirm(values) {
      this.houseInfo.province = values[0].name;
      this.houseInfo.city = values[1].name;
      this.houseInfo.region = values[2].name;
      this.areaValue = values.map((item) => item.name).join("/");
      this.showArea = false;
    },
    //房子类型确认
    onHouseTypeConfirm(value) {
      this.houseInfo.rentType = this.houeseTypevalueColumns.indexOf(value) + 1;
      this.houeseTypevalue = value;
      this.showPicker = false;
    },
    //房子朝向确认
    onhouseDirctionConfirm(value) {
      this.houseInfo.direction =
      this.houseDirctionValueColumns.indexOf(value) + 1;
      this.houseDirctionValue = value;
      this.showDirectionPopup = false;
    },
    //点击提交房源信息
    submitBtn() {
      let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
      let devicesArr = [];
      arr.forEach((val1) => {
        let ishave = this.checkboxDevicesGroup.some((val2) => val1 == val2);
        ishave ? devicesArr.push("1") : devicesArr.push("0");
      });
      let i = 0;
      for (let item in this.devices) {
        this.devices[item] = devicesArr[i];
        i++;
      }
      this.houseInfo.devices = this.devices;
      this.houseInfo.devices.id = this.devicesId;
      if (this.houseName.trim().length != 0) {
        this.houseInfo.address += this.houseName + this.houseName.length;
      }
      console.log(this.houseInfo);
      this.showSelectPopup = true;
    },
    handleCancel() {
      this.showSelectPopup = false;
    },
    handleAffirm() {
      this.showSelectPopup = false;

      console.log(this.houseInfo);

      // 发送请求
      upDataHouseInfo(this.houseInfo).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$toast({
            message: "修改成功",
            position: "bottom",
          });
          this.$router.replace({
            path: "/rentstate/awaitcheck",
            query: {
              houseId: res.data,
            },
          });
        }
      });
    },
    //点击遮罩层
    handleClickOverlay() {
      this.showSelectPopup = false;
    },
    //上传房源图片
    afterRead(file) {
      if (file.length > 1) {
        //使用for循环来适配多选情况
        for (let i in file) {
          this.upimg(file[i]);
        }
      } else {
        this.upimg(file);
      }
    },
    //上传图片到服务器
    upimg(e) {
      var formdata = new FormData();
      formdata.append("files", e.file);
      uploadingHousePicture(formdata).then((res) => {
        console.log(res);
        this.houseInfo.imageList.push(res.data[0]);
      });
    },
  },
  created() {
    //查看房子的信息
    getHouseDetail(this.$route.query.houseId).then((res) => {
      console.log(res.data);
      this.houseInfo = res.data;
      this.areaValue =
        res.data.city + " " + res.data.province + " " + res.data.region;
        console.log(res.data.rentType);
      this.houeseTypevalue = this.houeseTypevalueColumns[res.data.rentType - 1] ;
      console.log(this.houeseTypevalue);
      this.houseDirctionValue = this.houseDirctionValueColumns[res.data.direction - 1];
      let i = 0;
      for (let item in res.data.devices) {
        if (item == "id" || item == "deleted" || item == "houseId") {
          continue;
        } else {
          i++;
        }
        if (res.data.devices[item] == 1) {
          this.checkboxDevicesGroup.push(i + "");
        }
      }
      this.devicesId = res.data.devices.id;
    });
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
};
</script>

<style scoped>
.ownerservice-content {
  padding-top: 50px;
  margin-bottom: 43px;
}
.devices-box {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
}
.submitBtn {
  height: 35px;
  width: 300px;
  margin-top: 30px;
  outline: none;
  border: none;
  background-color: #ff5654;
  color: #fff;
  border-radius: 5px;
  margin-left: 28px;
}
</style>